<template>
  <div id="personal-primary">
    <div class="primary-box">
      <NavBar title="初级认证" left-arrow @click-left="onClickLeft" />
      <div class="primary-body">
        <Form @submit="onSubmit">
          <Field
            label="证件类型"
            v-model="typeid"
            name="证件类型"
            placeholder="请选择证件类型"
            @click="showPicker = true"
          />
          <Popup v-model="showPicker" round position="bottom">
            <Picker
              show-toolbar
              :columns="columns"
              @cancel="showPicker = false"
              @confirm="onConfirm"
              :rules="[{ required: true, message: '请选择证件类型' }]"
            />
          </Popup>

          <Field
            v-model="username"
            name="用户名"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <Field
            v-model="identity"
            name="证件号码"
            label="证件号码"
            placeholder="请输入证件号码"
            :rules="[{ required: true, message: '请填写正确格式的证件号码' }]"
          />
          <div class="btn">
            <Button round block type="info" native-type="submit">提交</Button>
          </div>
        </Form>
      </div>
    </div>
  </div>
</template>
<script>
import { NavBar, Picker, Field, Popup, Form, Button, Toast} from "vant";
export default {
  components: {
    NavBar,
    Picker,
    Field,
    Popup,
    Form,
    Button,
    Toast,
  },

  data() {
    return {
      typeid: "", // 证件类型
      username: "", // 姓名
      identity: "", // 身份证
      showPicker: false,
      columns: ["身份证", "护照", "驾照"],
    };
  },

  methods: {
    // 方法

    // 获取选择证件类型
    onConfirm(typeid) {
      this.typeid = typeid;
      this.showPicker = false;
    },

    // 提交
    onSubmit(values) {
      // 必填校验
      if (!this.typeid) {
        Toast('请选择证件类型！')
        return false
      }
      console.log("submit", values);
    },

    // 跳出
    onClickLeft() {
      console.log("跳出");
      this.$router.go(-1);
    },




    // 网络请求

  },
};
</script>
<style lang="less" scoped>
#personal-primary {
  width: 100%;
  .primary-box {
    .primary-body {
      margin: 10px auto;
      .btn {
        width: 350px;
        margin: 16px auto;
      }
    }
  }
}
</style>
